<!DOCTYPE html>
<html>
<head>
  <title>Style Nested</title>
  <script src="http://www.polymer-project.org/polymer/polymer.min.js"></script>
<element name="test" constructor="TestItem">
  <template>
    <style>
      @host {
        * {background-color: yellow;
        width: 50px;
        height: 50px;
        margin: 10px;
        padding: 10px;
        text-align:center;
           display: block;
      }
}
    </style>
    <div id="el"><content></content></div>
  </template>
  <script>
    if (this !== window) {
        Polymer.register(this);
    }
  </script>
</element>

<element name="test-container" attributes="kids">
  <template>
    <style>
      #container {
        display: block;
        position: relative;
        background-color: green;
        padding: 10px;
      }
    </style>
    <div id="container"><content></content>
    <template repeat="{{kids}}">
    <test>{{ name }}</test>
    </template>
    </div>
  </template>
  <script>
    if (this !== window) {
        Polymer.register(this, {
            insertedCallback: function() {
            },
            kidsChanged:function() {
                var deg = 15;
                for (var i = 0; i < this.children.length; ++i) {
                    var child = this.children[i];
                    child.style = '-webkit-transform:rotate(' + deg + 'deg);';
                    deg += 15;
                }
            }
        });
    }
  </script>
</element>

  <style>
    body {
    font-family:Arial,san-serif;
    }
  </style>
</head>
<body>
<test-container id="container"></test-container>
<script>
var container = document.getElementById('container');

window.addEventListener('WebComponentsReady', function () {
    var childElements = [{name:'Bob'},{name:'Carol'},{name:'Ted'}];
    container.kids = childElements;
});
</script>
</body>
